<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>个人信息页面</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .user-card {
            margin: 20px;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .user-avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="text-center my-4">用户信息列表</h1>
        
        <!-- 单个用户信息卡片 -->
        <div class="row">
            <div class="col-md-6 col-lg-4" th:each="user : ${user}">
                <div class="user-card bg-white">
<!--                    <div class="text-center mb-3">-->
<!--                        <img th:src="${user.avatar != null ? user.avatar : '/images/default-avatar.png'}" -->
<!--                             class="user-avatar" alt="用户头像">-->
<!--                    </div>-->
                    <div class="user-info">
                        <p><strong>用户ID:</strong> <span th:text="${user.id}"></span></p>
                        <p><strong>用户名:</strong> <span th:text="${user.nickname}"></span></p>
                        <p><strong>手机号:</strong> <span th:text="${user.mobile}"></span></p>
                        <p><strong>志愿时长:</strong> <span th:text="${user.totalVolunteerHours}"></span></p>
                        <p><strong>创建时间:</strong> <span th:text="${#temporals.format(user.registerDate, 'yyyy-MM-dd HH:mm:ss')}"></span></p>
<!--                        <p><strong>状态:</strong> -->
<!--                            <span th:class="${user.status == 1 ? 'text-success' : 'text-danger'}"-->
<!--                                  th:text="${user.status == 1 ? '正常' : '禁用'}">-->
<!--                            </span>-->
<!--                        </p>-->

                    </div>
<!--                    <div class="mt-3">-->
<!--                        <button class="btn btn-primary btn-sm" -->
<!--                                th:onclick="'editUser(' + ${user.id} + ')'">编辑</button>-->
<!--                        <button class="btn btn-danger btn-sm" -->
<!--                                th:onclick="'deleteUser(' + ${user.id} + ')'">删除</button>-->
<!--                    </div>-->
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!--    <script>-->
<!--        function editUser(userId) {-->
<!--            // 实现编辑用户的逻辑-->
<!--            console.log('编辑用户:', userId);-->
<!--        }-->

<!--        function deleteUser(userId) {-->
<!--            if (confirm('确定要删除该用户吗？')) {-->
<!--                // 实现删除用户的逻辑-->
<!--                console.log('删除用户:', userId);-->
<!--            }-->
<!--        }-->
<!--    </script>-->
</body>
</html> 